import React, { useState, useEffect, useMemo } from 'react';
import s from './style.module.less';
import { filterNull } from '@/utils';

import cn from 'classnames';
import BreadCrumb from '@/components/BreadCrumb';
import i from '@/index.module.css';
import {
  Table,
  Tooltip,
  Dropdown,
  Menu,
  Button,
  Input,
  Pagination,
  Confirm,
  Message,
  Form,
  Dialog,
  Progress,
  Cascader,
  Select,
  Loading,
} from '@knownsec/react-component';

import {
  changeTaskStatus,
  getTargetList,
  delTarget,
  putTargetName,
  putRescan,
  getGroupTotal,
  postReport,
  getReportAll,
  getTaskTotal,
  productInfo,
} from '~/API';
import { Link, useHistory, useLocation } from 'react-router-dom';
import high from '@/assets/svg/risk_high.svg';
import low from '@/assets/svg/risk_low.svg';
import middle from '@/assets/svg/risk_middle.svg';
import safe from '@/assets/svg/risk_safe.svg';
import yz from '@/assets/svg/yz.svg';
import Icon from '@/assets/icon';
import unknown from '@/assets/svg/unknown.svg';
import recursionForm from '@/common/recursionForm';
import { EVENT_SEVERITY, SECURITY_MAP } from '@/common/common';
import { datetime } from '@/common/formatter';
import CopyText from '@/components/copy';
import SentAlert from '@/components/SentAlert';
import monitorOptions from './monitorOptions';
import Download from './Download';
function MonitorList() {
  const history = useHistory();
  const prefilter = new URLSearchParams(useLocation().search).get('filter');
  const filter = prefilter ? JSON.parse(prefilter) || {} : {};
  const [searchVal, setSearchVal] = useState({
    page: filter.page || 1,
    limit: filter.limit || 10,
  });
  const [queryVal, setQueryVal] = useState({
    target_name: filter.target_name || '',
    target_url: filter.target_url || '',
    target_group_name: filter.target_group_name || '',
    level: filter.level || '',
    monitor_item: filter.monitor_item || '',
  });
  const [refe, setRef] = useState(false);
  const [dataCount, setTotalData] = useState({ target_count: 0 });
  const [total, setTotal] = useState(0);
  const [tableData, setTableData] = useState([]);
  const [selTable, setSelTable] = useState([]);
  const [isDown, setIsDown] = useState('');
  const [isDowning, setIsDowning] = useState(false);
  const [percent, setPercent] = useState(0);
  const [upVisible, setUpVisible] = useState('');
  const [maxNum, setMaxNum] = useState(0);
  const [hasCloud, setHasCloud] = useState(false);
  const [showLoading, setShowLoading] = useState(false);
  const [trial, setTrial] = useState(false);
  const createForm = React.useRef();
  const [nameVisible, setNameVisible] = useState(false);
  const [changeNameRow, setChangeNameRow] = useState(null);
  const [sendData, setSendData] = useState(null);
  const changeName = (row) => {
    createForm.current.setFieldsValue({
      name: row?.target_name ? row?.target_name : row?.target_title,
    });
    setChangeNameRow(row);
    setNameVisible(true);
  };
  const onValues = (data) => {
    let values = recursionForm(data);
    createForm.current.setFieldsValue(values);
  };
  const validatormap = (rule, value, callback) => {
    if (value && value.length > 50) {
      callback('名称最大长度为50');
    } else {
      return Promise.resolve();
    }
  };
  const changeNameSubmit = () => {
    createForm.current.validateFields().then(data => {
        putTargetName({ data: { target_name: data.name }, id: changeNameRow.id }).then(res => {
            if (res.status === 'success') {
              getList(searchVal);
              setNameVisible(false)
              Message.show({
                pro: true,
                type: 'success',
                message: '修改成功',
                showClose: false,
              });
            }
        });
    })
  }


  const columns = [
    {
      title: '业务系统',
      dataIndex: 'target_url',
      render: (e, row) => {
        const name = row.target_name ? row.target_name : row.target_title;
        return (
          <Tooltip
            overlay={
              <>
                <p>
                  业务系统：
                  <CopyText text={e} />
                </p>
                <p>业务系统名称：{name || '暂未设置'}</p>
              </>
            }
            placement="topLeft"
          >
            <div>
              <Link
                className={s.hrefName}
                to="#"
                onClick={() => {
                  window.open(e);
                }}
              >
                {e}
              </Link>
              <div
                className={s.targetName}
                style={{ color: name ? '#2A2B31' : '#ccc' }}
                onClick={() => {
                  changeName(row);
                }}
              >
                {name || '点击设置业务系统名称'}
              </div>
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '风险值',
      dataIndex: 'score',
      className: s.w_7,
      render: (e) => {
        const obj = [
          [unknown, '未知', ''],
          [safe, '安全', 'safe'],
          [low, '低危', 'low'],
          [middle, '中危', 'middle'],
          [high, '高危', 'high'],
          [yz, '严重', 'yz'],
        ];
        let src = obj[0];
        if (e > 75) {
          src = obj[5];
        } else if (e > 50) {
          src = obj[4];
        } else if (e > 25) {
          src = obj[3];
        } else if (e > 0) {
          src = obj[2];
        } else if (e === -1) {
          src = obj[0];
        } else {
          src = obj[1];
        }
        return (
          <Tooltip overlay={<span className={src[2]}>{src[1]}</span>} placement="topLeft">
            <div className={s.riskBox}>
              <img src={src[0]} alt="" className={s.imgSvg} />
              <span className={s.imgSp}>{e === -1 ? '未知' : e}</span>
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '可用性',
      dataIndex: 'availability',
      className: s.w_7,
      render: (e = {}) => {
        const STATUS=['未知','正常','异常']
        const STATUS_C=['#7f7e7d','#11ab4e','#f04038']
        const {normal_status,local,cloud}=e
        const tip = (
          <div className={s.tipSite}>
            <div>
              <span className={s.circular}></span>
              <span>
                本地&nbsp;{STATUS[local.normal_status]}(
                {datetime(e.local.created_at) || '--'})
              </span>
            </div>
            {hasCloud&& <div>
              <span className={s.circular}></span>
             <span>
                云端&nbsp;{STATUS[cloud.normal_status]}(
                {datetime(e.cloud.created_at) || '--'})
              </span>
            </div>}
          </div>
        );
        return (
          <Tooltip overlay={tip} placement="topLeft">
            <div className={s.siteInfo}>
              <span
                className={s.circular}
                style={{ background:STATUS_C[normal_status]}}
              ></span>
              <div
                className="event-link event-high-color"
                style={{ color:STATUS_C[normal_status]}}
              >
                {STATUS[normal_status]}
              </div>
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '安全事件',
      dataIndex: 'securityEvent',
      className: s.w_7,
      render: (e, row) => {
        const task_disabled = row.task_disabled?.securityEvent;
        if (!e) {
          return null;
        }
        let total = 0;
        if (Object.keys(e).length) {
          Object.keys(e).forEach((key) => {
            total += e[key];
          });
          total = `${total}个`;
        } else {
          total = '-';
        }
        const tip = (
          <div className={s.tipBox}>
            {Object.keys(SECURITY_MAP).map((item, i) => {
              return (
                <div className={s.tipItem} key={i}>
                  <span>{SECURITY_MAP[item][0]}</span>
                  <span style={{ color: SECURITY_MAP[item][1] }}>
                    {e[item] >= 0 ? e[item] : '-'}
                  </span>
                </div>
              );
            })}
          </div>
        );
        return (
          <div className={s.siteInfo}>
            <Tooltip overlay={tip} placement="top">
              <span style={{ color: task_disabled ? '#beb4b4' : '#2a2b31' }}>{total}</span>
            </Tooltip>
          </div>
        );
      },
    },
    {
      title: '漏洞',
      dataIndex: 'vul',
      className: s.w_7,
      render: (e, row) => {
        const task_disabled = row.task_disabled?.vul;
        if (!e) {
          return null;
        }
        let total = 0;
        Object.keys(e).forEach((key) => {
          total += e[key];
        });
        const tip = (
          <div className={s.tipBox}>
            {Object.keys(EVENT_SEVERITY).map((item, i) => {
              return (
                <div className={s.tipItem} key={i}>
                  <span>{EVENT_SEVERITY[item][0]}</span>
                  <span style={{ color: EVENT_SEVERITY[item][1] }}>{e[item] || 0}</span>
                </div>
              );
            })}
          </div>
        );
        return (
          <div className={s.siteInfo}>
            <Tooltip overlay={tip} placement="top">
              <span style={{ color: task_disabled ? '#beb4b4' : '#2a2b31' }}>{total}个</span>
            </Tooltip>
          </div>
        );
      },
    },
    {
      title: '风险外链',
      dataIndex: 'risk_link',
      className: s.w_7,
      render: (e, row) => {
        const task_disabled = row.task_disabled?.risk_link;
        if (!e) {
          return null;
        }
        const event = {
          HIGH: ['高危', '#f04038'],
          MEDIUM: ['中危', '#f87b10'],
          LOW: ['低危', '#fed831'],
        };
        let total = 0;
        Object.keys(e).forEach((key) => {
          total += e[key];
        });
        const tip = (
          <div className={s.tipBox}>
            {Object.keys(event).map((item, i) => {
              return (
                <div className={s.tipItem} key={i}>
                  <span>{event[item][0]}</span>
                  <span style={{ color: event[item][1] }}>{e[item] || 0}</span>
                </div>
              );
            })}
          </div>
        );
        return (
          <div className={s.siteInfo}>
            <Tooltip overlay={tip} placement="top">
              <span style={{ color: task_disabled ? '#beb4b4' : '#2a2b31' }}>{total}个</span>
            </Tooltip>
          </div>
        );
      },
    },
    {
      title: '篡改',
      dataIndex: 'change_check',
      className: s.w_7,
      render: (e, row) => {
        const task_disabled = row.task_disabled?.change_check;
        if (!e) {
          return '0个';
        }
        const event = {
          LOW: ['低危', '#fed831'],
        };
        let total = 0;
        Object.keys(e).forEach((key) => {
          total += e[key];
        });
        const tip = (
          <div className={s.tipBox}>
            {Object.keys(event).map((item, i) => {
              return (
                <div className={s.tipItem} key={i}>
                  <span>{event[item][0]}</span>
                  <span style={{ color: event[item][1] }}>{e[item] || 0}</span>
                </div>
              );
            })}
          </div>
        );
        return (
          <div className={s.siteInfo}>
            <Tooltip overlay={tip} placement="top">
              <span style={{ color: task_disabled ? '#beb4b4' : '#2a2b31' }}>{total}个</span>
            </Tooltip>
          </div>
        );
      },
    },
    {
      title: '任务组',
      dataIndex: 'target_group_name',
      render: (e, row) => {
        const f = JSON.stringify(filterNull({ target_group_name: e }));
        const text = row.is_periodic ? '周期任务' : '单次任务';
        return (
          <Tooltip overlay={`任务类型：${text}`} placement="topLeft">
            <Link
              to={{
                pathname: '/task_group',
                search: `filter=${encodeURI(f)}`,
              }}
              className={s.itemLink}
            >
              <Icon className={i.vam} active={row.is_periodic ? 'cycle' : 'once'} />
              <span className={s.itemSpan}>{e}</span>
            </Link>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      className: s.w_10,
      valueType: 'option',
      render: (e, row) => {
        const id = row.id;
        return (
          <div className={s.operation}>
            <div className={s.detailsBtn}>
              <a href={`/#/dashboard/?id=${row.id}`} target="_blank" rel="noreferrer">
                详情
              </a>
            </div>
            <Dropdown
              onVisibleChange={(e) => {
                const id_ = e ? id : '';
                setIsDown(id_);
              }}
              overlay={
                <Menu>
                  <Menu.Item key="1">
                    <Link
                      to={{
                        pathname: '/form_page',
                        search: `id=${row.id}&type=solo&back=${prefilter}`,
                      }}
                    >
                      <span className={s.itemSpan}>编辑</span>
                    </Link>
                  </Menu.Item>
                  <Menu.Item
                    key="2"
                    onClick={() => {
                      taskCreate({ id: [row.id] });
                    }}
                  >
                    <span className={s.itemSpan}>立即检测</span>
                  </Menu.Item>
                  <Menu.Item key="3">
                    <a
                      onClick={() => {
                        delList({ id: [row.id] });
                      }}
                    >
                      删除
                    </a>
                  </Menu.Item>
                </Menu>
              }
              trigger={['click']}
            >
              <a
                className="ant-dropdown-link"
                onClick={(e) => {
                  e.preventDefault();
                }}
              >
                管理
                <div
                  className={s.jt}
                  style={{ transform: id === isDown ? 'rotate(45deg)' : 'rotate(-135deg)' }}
                ></div>
              </a>
            </Dropdown>
          </div>
        );
      },
    },
  ];

  const getInfo = async () => {
    if (localStorage.info) {
      const Info = JSON.parse(localStorage.info);
      setHasCloud(Info.modules.includes('cloud'));
      setTrial(Info?.is_trial);
      return Info;
    }
    const Info = await productInfo();
    if (Info.status == 'success') {
      Info.data.modules.push('change_check');
      Info.data.change_check = { crawler_depth: 10, crawler_max_page: 100000, seconds: 1800 };
      localStorage.info = JSON.stringify(Info.data);
      setHasCloud(Info.data.modules.includes('cloud'));
      setTrial(Info.data?.is_trial);
      return Info.data;
    } else {
      return {};
    }
  };
  const getTotal = async () => {
    const Info = await getInfo();
    getGroupTotal().then((res) => {
      if (res.status == 'success') {
        res.data.residue = res.data.max_task_session_count - res.data.task_session_count;
        setTotalData(res.data);
      }
      const useNum = res.data.task_session_count;
      const maxNum_ = Info?.max_task_session_number;
      if (maxNum_ && useNum >= maxNum_ && Info.is_trial) {
        setMaxNum(maxNum_);
      }
    });
  };
  const submitQuery = ({ page, limit, data }) => {
    if(showLoading){return}
    const querys = filterNull(
      Object.assign(data || queryVal, { page: page || 1, limit: limit || 10 })
    );
    const backparams = JSON.stringify(querys);
    const searchString = 'filter=' + encodeURI(backparams);
    history.replace(`/monitor?${searchString}`);
    getList(querys);
    setSearchVal(querys);
  };
  const taskCreate = async ({ id }) => {
    let selTable_ = id ? id : selTable;
    let closeId = [];
    tableData.forEach((e) => {
      if (selTable_.includes(e.id)) {
        if (!e.enable && e.is_periodic) {
          closeId.push(e.target_group_id);
        }
      }
    });
    const text = closeId[0]
      ? '选中业务系统所属任务组存在处于监测关闭状态，下发立即检测将开启任务组监测状态并重置您所选业务系统周期时间，您确认要立即检测？'
      : '本次检测将重置您设置的周期性监测任务时间，确认要立即检测选中的业务系统吗？';
    Confirm({
      title: '提示',
      pro: true,
      className: s.confirmOutbox,
      message: <div className="confirmbox">{text}</div>,
      onconfirm: async () => {
        if (closeId[0]) {
          const pArr = [];
          closeId.forEach((id) => {
            pArr.push(
              changeTaskStatus({
                data: { enable: true },
                id,
              })
            );
          });
          const resP = await Promise.all(pArr).catch((e) => {
            return 'err';
          });
          if (resP === 'err') {
            Message.show({
              pro: true,
              showClose: false,
              type: 'error',
              message: '下发失败',
            });
            return false;
          }
        }
        const res = await putRescan({ target_ids: selTable_ }).catch((e) => {
          return e;
        });
        if (res.status === 'success') {
          Message.show({
            pro: true,
            showClose: false,
            type: 'success',
            message: '下发成功',
          });
        } else {
          const data = res.message.map((e) => {
            return { name: e[0], target: e[1], cause: e[2] };
          });
          setSendData(data);
        }
        setSelTable([]);
        setRef(!refe);
        selTable_ = [];
      },
      oncancel: () => {},
    });
  };
  const changeShow = () => {
    setSendData(null);
  };
  const delList = async ({ id }) => {
    let selTable_ = id ? id : selTable;
    Confirm({
      title: '提示',
      pro: true,
      message: <div className="confirmbox">确认要删除选择的业务系统吗？</div>,
      onconfirm: async () => {
        const res = await delTarget({ target_ids: selTable_ });
        if (res.status === 'success') {
          Message.show({
            pro: true,
            showClose: false,
            type: 'success',
            message: '删除成功',
          });
          setSelTable([]);
          setRef(!refe);
          submitQuery({ page: searchVal.searchVal, limit: searchVal.limit });
        }
      },
      oncancel: () => {},
    });
  };

  const goForm = () => {
    history.push({
      pathname: '/form_page',
      params: { time: new Date() },
      search: `back=${prefilter}`,
    });
  };
  //获取列表数据
  const getList = async (e) => {
    setShowLoading(true);
    setSelTable([]);
    setRef(!refe);
    await getTotal();
    getTargetList(e)
      .then((res) => {
        if (res.status === 'success') {
          const data = res.data.data.map((e) => {
            e.id = e.target_id;
            return e;
          });
          setTotal(res.data.total);
          setTableData(data);
        }
        setShowLoading(false);
      })
      .catch((err) => {
        Message.show({
          pro: true,
          type: 'error',
          message: err,
          showClose: false,
        });
        setShowLoading(false);
      });
  };
  // 关闭导出框
  const changeVisible = () => {
    setUpVisible(false);
    setPercent(0);
    setRef(!refe);
    setSelTable([]);
  };
  //批量导出
  const showDialog = async () => {
    Confirm({
      pro: true,
      title: '提示',
      message: <div className="confirmbox">确认导出所选业务系统报告？</div>,
      onconfirm: async () => {
        setIsDowning(true);
        let params = {};
        let pace = {};
        let setIn = null;
        params = { target_ids: selTable };
        await postReport(params);
        setUpVisible('压缩');
        params = { type: 'progress' };
        const initSet = () => {
          clearInterval(setIn);
          setUpVisible('');
          setSelTable([]);
          setRef(!refe);
          setPercent(0);
          setIsDowning(false);
        };
        setIn = setInterval(async () => {
          pace = await postReport(params);
          if (pace.status == 1) {
            const aa = await getReportAll();
            initSet();
          } else if (pace.status == 3 || pace.status == 2) {
            setPercent(pace.value);
          } else if (pace.status == 0 || pace.errcode != 0) {
            initSet();
            Message.show({
              pro: true,
              showClose: false,
              type: 'error',
              message: pace.message || '导出失败',
            });
          }
        }, 2000);
      },
      oncancel: () => {},
    });
  };
  useEffect(() => {
    submitQuery({});
  }, [queryVal.level, queryVal.monitor_item]);
  return (
    <>
      <BreadCrumb arr={[{ link: '', name: '监测列表', active: true }]}>
        <div className={s.total}>
          <div className={s.item}>
            <label>业务系统数</label>
            <p>{dataCount.target_count}</p>
          </div>
          {trial && (
            <div className={s.item}>
              <label>剩余检测次数</label>
              <p>{dataCount.residue > 0 ? dataCount.residue : 0}</p>
            </div>
          )}
        </div>
      </BreadCrumb>
      <div className={s.mainMonitor}>
        {/* <Loading show={showLoading} label="" /> */}
        <div className={s.tableBox}>
          <p className={s.wordMain_h} style={{ display: maxNum ? 'block' : 'none' }}>
            系统支持下发{maxNum}次检测任务，目前已达到上限。
          </p>
          <div className={s.searchBox}>
            <div className={s.searchLeft}>
              <Button pro type="primary" onClick={goForm}>
                接入业务系统
              </Button>
            </div>
            <div className={s.searchRight}>
              <Select
                value={[queryVal.level]}
                className={cn(s.mr8, s.searchName)}
                pro
                placeholder="选择风险等级"
                option={[
                  { label: '严重', value: 5 },
                  { label: '高危', value: 4 },
                  { label: '中危', value: 3 },
                  { label: '低危', value: 2 },
                  { label: '安全', value: 1 },
                  { label: '未知', value: 0 },
                ]}
                clearable
                onChange={({ selectedItem }) => {
                  if (selectedItem[0]) {
                    setQueryVal({ ...queryVal, level: selectedItem[0].value });
                  } else {
                    setQueryVal({ ...queryVal, level: null });
                  }
                }}
              />
              <Cascader
                className={s.mr8}
                pro
                placeholder="选择监测项"
                changeOnSelect={false}
                options={monitorOptions}
                onChange={(e) => {
                  if (e) {
                    setQueryVal({ ...queryVal, monitor_item: e[e.length - 1] });
                  } else {
                    setQueryVal({ ...queryVal, monitor_item: e });
                  }
                }}
              />
              <Input
                pro
                placeholder="搜索任务组名称"
                value={queryVal.target_group_name}
                search
                className={cn(s.searchName, 'search-button')}
                onSearch={submitQuery}
                clear
                onChange={(value) => {
                  setQueryVal({ ...queryVal, target_group_name: value.value });
                  if (!value.e) {
                    const data = { ...queryVal, target_group_name: '' };
                    submitQuery({ data });
                    return;
                  }
                }}
              ></Input>
              <Input
                pro
                placeholder="搜索业务系统名称"
                value={queryVal.target_name}
                search
                className={cn(s.searchName, 'search-button')}
                onSearch={submitQuery}
                clear
                onChange={(value) => {
                  setQueryVal({ ...queryVal, target_name: value.value });
                  if (!value.e) {
                    const data = { ...queryVal, target_name: '' };
                    submitQuery({ data });
                    return;
                  }
                }}
              ></Input>
              <Input
                pro
                placeholder="搜索业务系统地址"
                value={queryVal.target_url}
                className={cn(s.searchName, 'search-button', 'last')}
                search
                onChange={(value) => {
                  setQueryVal({ ...queryVal, target_url: value.value });
                  if (!value.e) {
                    const data = { ...queryVal, target_url: '' };
                    submitQuery({ data });
                    return;
                  }
                }}
                onSearch={submitQuery}
                clear
              ></Input>
            </div>
            <div className={s.allDel}>
              <Button type="text" onClick={delList} disabled={!selTable.length}>
                删除
              </Button>
              <Button type="text" onClick={taskCreate} disabled={!selTable.length}>
                立即检测
              </Button>
              {/* <Button
                type="text"
                disabled={!selTable.length || isDowning}
                onClick={showDialog}
            >
                导出报告
            </Button> */}
              <Download disabled={!selTable.length || isDowning} selTable={selTable} />
            </div>
          </div>
          <div className={s.table}>
            <Table
              refre={refe}
              columns={columns}
              className={selTable.length ? 'half-select' : ''}
              selectable
              tableLoading={showLoading}
              loadingLabel=""
              data={tableData}
              getCheckedList={(e) => {
                setSelTable(e);
              }}
            ></Table>
          </div>
          {total > 10 && (
            <Pagination
              key={Number(123)}
              className={s.pagination}
              current={searchVal.page}
              showQuickJumper={{ goButton: true }}
              showSizeChanger={true}
              pageSize={searchVal.limit}
              pageSizeOptions={['10', '20', '50']}
              total={total}
              showTotal={(total) => `共${total}条`}
              onChange={(page, size) => {
                submitQuery({ page, limit: size });
              }}
            />
          )}
        </div>
        <Dialog
          className={cn(i.w400)}
          title={'提示'}
          visible={upVisible}
          cancelText=""
          confirmText=""
          // closable={false}
          onhide={() => {
            changeVisible();
          }}
        >
          <div className={i.p20}>
            <p className={cn(i.tac)}>正在进行{upVisible}</p>
            <p className={cn(i.tac)}>进度:{percent}%</p>
            <Progress percent={percent + '%'} className={i.mt10} />
          </div>
        </Dialog>
        <SentAlert data={sendData} type={0} changeShow={changeShow}></SentAlert>
      </div>
      <Dialog
        className="w540"
        title="设置业务系统名称"
        visible={nameVisible}
        cusCancel={
          <Button
            type="default"
            className={i.mr20}
            onClick={() => {
              setNameVisible(false);
              createForm.current.resetFields();
            }}
          >
            取消
          </Button>
        }
        onhide={() => {
          setNameVisible(false);
          createForm.current.resetFields();
        }}
        onsubmit={changeNameSubmit}
      >
        <div className={s.p24}>
          <Form
            ref={createForm}
            onValuesChange={(newItem, allValues) => {
              onValues(newItem, allValues);
            }}
          >
            <Form.Item
              rules={[{ validator: validatormap }]}
              name="name"
              label="业务系统名称"
              initialValue={
                changeNameRow?.target_name
                  ? changeNameRow?.target_name
                  : changeNameRow?.target_title
              }
            >
              <Input
                pro
                className={s.inpName}
                maxlength={50}
                placeholder="请输入业务系统名称（最长50个字符）"
              ></Input>
            </Form.Item>
          </Form>
        </div>
      </Dialog>
    </>
  );
}

export default MonitorList;
